<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<!-- search框 -->
		<view class="search">
			<view class="search-input">
				<input v-model.trim="keyword" type="text" placeholder="请输入搜索内容" />
				<image class="goods-search" src="../../../static/search.png" mode="aspectFit" @click="search"></image>
			</view>
		</view>
		
		
		
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper :indicator-dots="true"
			:autoplay="true"
			:interval="2000"
			:duration="1000"
			circular="true">
				<swiper-item>
					<view class="swiper-item">
						<image src="../static/exam.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		
		
		<view class="questionbank">
			<!-- 题库title -->
			<view class="questionbank-title">
				<view class="questionbank-title-item" v-for="(item, index) in questionBankList" :key="index">
					<view @click="questionBankChange(index)" :class="{btna:btnnum == index}">{{item}}</view>
					<text :class="{_underline: btnnum == index}"></text>
				</view>
			</view>
			
			
			<!-- 题库内容 -->
			<view class="questionbank-content">
				<!-- 在线考试-->
				<view class="free" :class="{dis:btnnum == 0}">
					<view @click="navigate(item)" class="free-list" v-for="(item, index) in zaixian" :key="index">
						<view class="free-list-top">
							<view class="free-list-top-left">
								<text> <text style="color: #ff0000;">【{{item.type_name}}】</text> {{ item.name }}{{item.type==1?'¥:'+item.price:''}}</text>
								<view class="">
									<image src="../../../static/shijian.png" mode=""></image>
									<text>开始时间: {{ item.start_time }}</text>
								</view>
								<view class="">
									<image src="../../../static/shijian.png" mode=""></image>
									<text>结束时间: {{ item.end_time }}</text>
								</view>
								<view class="">
									<image src="../../../static/icon1.png" mode=""></image>
									<text>时长: {{ item.minute }}分钟</text>
									<text style="font-size: 28upx;margin-left: 20upx; color: #979797; font-weight: 400; ">总分: {{ item.total }}</text>
									<text style="font-size: 28upx;margin-left: 20upx; color: #979797; font-weight: 400; ">及格分: {{ item.pass_mark }}</text>
								</view>
							</view>
							<view class="free-list-top-right" style="width: 180upx;height: 60upx;">
								<text>开始考试</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 练习题-->
				<view class="free" :class="{dis:btnnum == 1}">
					<view @click="navigate(item)" class="free-list" v-for="(item, index) in lianxi" :key="index">
						<view class="free-list-top">
							<view class="free-list-top-left">
								<text> <text style="color: #ff0000;">【{{item.type_name}}】</text> {{ item.name }}</text>
								<view class="">
									<image src="../../../static/shijian.png" mode=""></image>
									<text>开始时间: {{ item.start_time }}</text>
								</view>
								<view class="">
									<image src="../../../static/shijian.png" mode=""></image>
									<text>结束时间: {{ item.end_time }}</text>
								</view>
								<view class="">
									<text style="font-size: 14px;margin-left: 20px; color: #979797; font-weight: 400; ">总分: {{ item.total }}</text>
									<text style="font-size: 14px;margin-left: 20px; color: #979797; font-weight: 400; ">及格分: {{ item.pass_mark }}</text>
								</view>
							</view>
							<view class="free-list-top-right" style="width: 180upx;height: 60upx;">
								<text>开始答题</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {postDataList} from '@/request/training.js'
	export default {
		data() {
			return {
				HOST_URL:uni.HOST_URL,
				swipers: [],
				questionBankList: ['在线考试','练习题'],
				btnnum: 0,
				freeQuestionBank: [],
				zaixian:[],
				moni:[],
				lianxi:[],
				keyword:'',
				uid:0
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		methods: {
			search(){
				var keyword = this.keyword
				if(keyword ==''){
					uni.showToast({
						title: '搜索内容不能为空',
						icon: 'none'
					});
					return false
				}
			},
			questionBankChange(e) {
				this.btnnum = e
			},
			navigate(item) {
				// console.log(item);
				var jsonItem = JSON.stringify(item);
				if(item.exam_type == 0) {
					uni.navigateTo({
						url: `/pages/sub/exam-item/exam-item1?item=${jsonItem}`
					})
				}else if(item.exam_type == 1) {
					uni.navigateTo({
						url: `/pages/sub/achievDetail/achievDetail1?item=${jsonItem}`
					})
				}
			},
			// 考试
			getexamList(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/exam1/index',
					data:{
						page:0,
						exam_type:0,
						uid:this.uid
					},
					method:'POST',
					success:(res) =>{
						console.log('本套试卷',res.data.data);
						this.zaixian = res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			
			// 练习题
			getpracticeList(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/exam1/index',
					data:{
						page:0,
						exam_type:1
					},
					method:'POST',
					success:(res) =>{
						console.log('练习题',res)
						console.log('本套练习题',res.data.data);
						this.lianxi = res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			}
		},
		onLoad() {
			let userinfo = uni.getStorageSync('userinfo');
			if(userinfo){
				this.uid = userinfo.uid;
			}
		},
		mounted() {
			this.getexamList()
			this.getpracticeList()
		}
	}
</script>

<style lang="less" scoped>

// 轮播图
.swiper {
	height: 262upx;
	background-color: #4b89ff;
	border-bottom: 96upx solid #f6f6f6;
	box-sizing: border-box;
	swiper {
		width: 709upx;
		height: 262upx;
		margin: 0 auto;
		border-radius: 20upx;
		overflow: hidden;
		swiper-item {
			view {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

// search框 
.search {
	height: 90upx;
	background-color: #4b89ff;
	padding: 0 20upx;
	padding-top: 30upx;
	// &-title {
	// 	height: 110upx;
	// 	text-align: center;
	// 	line-height: 110upx;
	// 	text {
	// 		font-size: 34upx;
	// 		color: #fff;
	// 	}
	// }
	&-input {
		position: relative;
		display: flex;
		background: #fff;
		border-radius: 63rpx;
		text {
			font-size: 31upx;
			color: #fff;
			margin-top: 10upx;
		}
		image {
			width: 25upx;
			height: 14upx;
			margin: 25upx 20upx 0 10upx;
		}
		input {
			width: 90%;
			height: 63upx;
			border: 0;
			background-color: #fff;
			border-radius: 63upx;
			font-size: 24upx;
			padding-left: 20upx;
			box-sizing: border-box;
		}
		.goods-search {
			width: 28upx;
			height: 28upx;
			position: absolute;
			right: 10upx;
			top: -5upx;
		}
	}
}



// 课程部分
.questionbank {
	&-title{
		height: 125upx;
		background-color: #fff;
		padding-top: 45upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		&-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			view {
			font-size: 30upx;
			color: #575757;
			}
			.btna { // 需要追加到view上的class
				font-weight: 700;
				color: #131313;
			}
			._underline { // 需要追加到view下方的下划线class
				width: 70upx;
				height: 7upx;
				background-color: #2f77ff;
				border-radius: 5upx;
				margin-top: 15upx;
			}
		}
		
	}
	
	&-content {
		// 免费题库
		.free {
			display: none;
			// padding: 0 30upx;
			&-list {
				margin-bottom: 4upx;
				background-color: #fff;
				&-top {
					padding: 25upx 30upx;
					border-bottom: 2upx solid #dedede;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-left {
						text {
							font-size: 32upx;
							font-weight: 700;
							color: #333;
							letter-spacing: 2upx;
						}
						view {
							margin-top: 20upx;
							display: flex;
							align-items: center;
							image:nth-child(1) {
								width: 30upx;
								height: 30upx;
							}
							text:nth-child(2) {
								font-size: 26upx;
								color: #979797;
								font-weight: 400;
								letter-spacing: 0;
								margin-left: 10upx;
							}
							image:nth-child(3) {
								width: 30upx;
								height: 30upx;
								margin-left: 30upx;
							}
							text:nth-child(4) {
								font-size: 26upx;
								color: #979797;
								font-weight: 400;
								letter-spacing: 0;
								margin-left: 10upx;
							}
						}
					}
					&-right {
						width: 150upx;
						height: 50upx;
						border: 2upx solid #d8bd7d;
						border-radius: 10upx;
						display: flex;
						align-items: center;
						justify-content: center;
						image {
							width: 30upx;
							height: 30upx;
						}
						text {
							font-size: 30upx;
							color: #d8bd7d;
							margin-left: 10upx;
						}
					}
				}
				&-bottom {
					padding: 20upx 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-left {
						display: flex;
						align-items: center;
						image {
							width: 30upx;
							height: 30upx;
						}
						text {
							font-size: 26upx;
							color: #979797;
							margin-left: 10upx;
						}
					}
					&-right {
						text {
							font-size: 26upx;
							color: #979797;
						}
					}
				}
			}
		}
		
		// 付费题库
		.pay {
			display: none;
			// padding: 0 30upx;
			&-list {
				margin-bottom: 4upx;
				background-color: #fff;
				&-top {
					padding: 25upx 30upx;
					border-bottom: 2upx solid #dedede;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-left {
						text {
							font-size: 32upx;
							font-weight: 700;
							color: #333;
							letter-spacing: 2upx;
						}
						view {
							margin-top: 20upx;
							display: flex;
							align-items: center;
							image:nth-child(1) {
								width: 30upx;
								height: 30upx;
							}
							text:nth-child(2) {
								font-size: 26upx;
								color: #979797;
								font-weight: 400;
								letter-spacing: 0;
								margin-left: 10upx;
							}
							image:nth-child(3) {
								width: 30upx;
								height: 30upx;
								margin-left: 30upx;
							}
							text:nth-child(4) {
								font-size: 26upx;
								color: #979797;
								font-weight: 400;
								letter-spacing: 0;
								margin-left: 10upx;
							}
							text:nth-child(5) {
								font-size: 26upx;
								color: red;
								font-weight: 400;
								letter-spacing: 0;
								margin-left: 20upx;
							}
						}
					}
					&-right {
						width: 100upx;
						height: 50upx;
						border: 2upx solid red;
						border-radius: 10upx;
						display: flex;
						align-items: center;
						justify-content: center;
						text {
							font-size: 30upx;
							color: red;
							margin-left: 10upx;
						}
					}
				}
				&-bottom {
					padding: 20upx 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-left {
						display: flex;
						align-items: center;
						image {
							width: 30upx;
							height: 30upx;
						}
						text {
							font-size: 26upx;
							color: #979797;
							margin-left: 10upx;
						}
					}
					&-right {
						text {
							font-size: 26upx;
							color: #979797;
						}
					}
				}
			}
		}
		
		.dis{
			display: block;
		}
	}
}


</style>
